<template>
  <div style="padding-left: 30%;">
    <div id="innerDiv" class="solidClass">
      <Top :taskMsgs="taskMsgs"/>
      <p/>
      <!--<Centers :taskMsgs="taskMsgs" :deleteTask="deleteTask"/>-->
      <!--方式四：PubSub的发布订阅，此并不局限于父子，也可以父、孙关系1.0-->
      <Centers :taskMsgs="taskMsgs"/>
      <p/>
      <!--此三种方式适用于父子之间一步一步的传递方法或者属性-->
      <!--方式一：props 实现组件之间的通信，1.0-->
      <!--<Floor :taskMsgs="taskMsgs" :deleteAllTrueTask="deleteAllTrueTask" :checkAllTask="checkAllTask"/>-->
      <!--方式二：@、@emit实现组件之间的通信，通常用于方法(常用)，2.0-->
      <!--<Floor :taskMsgs="taskMsgs" :deleteAllTrueTask="deleteAllTrueTask" @checkAllTask="checkAllTask"/>-->
      <!--方式三：@on、@emit实现组件之间的通信，通常用于方法，3.0-->
      <Floor :taskMsgs="taskMsgs" :deleteAllTrueTask="deleteAllTrueTask" ref="floor"/>
    </div>
  </div>
</template>

<script>
  import Top from './components/top';
  import Floor from './components/floor';
  import Centers from './components/center';
  import PubSub from 'pubsub-js'
  import localStorageUril from './utils/localStorageUtil'

  export default {
    name: "App",
    components: {
      Top,
      Floor,
      Centers
    },
    // 方式三：@on、@emit实现组件之间的通信，通常用于方法,3.1
    mounted() {//异步执行时间，模板渲染后被调用
      //给Floor绑定事件
      this.$refs.floor.$on("checkAllTask", this.checkAllTask);

      // 方式四：PubSub的发布订阅，此并不局限于父子，也可以父、孙关系1.0
      //订阅消息,这里使用 =>，不然函数内的this不是指的APP对象
      PubSub.subscribe("deleteTask", (msg, index) => {
        this.deleteTask(index)
      })
    },
    data() {
      return {
        //直接在页面给出固定数据
        // taskMsgs: [
        //   {"taskName": "kill john", "taskState": false},
        //   {"taskName": "save yohan", "taskState": true},
        //   {"taskName": "miss sala", "taskState": true},
        //   {"taskName": "hold zanmus", "taskState": false},
        //   {"taskName": "kiss jack", "taskState": true}
        // ]
        //使用浏览器的localStoage缓存技术，保存数据-01
        taskMsgs: localStorageUril.getData()
      }
    },
    //监听taskMsgs的任何变化，实时存储在浏览器的localStoage里-02
    watch: {
      taskMsgs: {
        //开启深度监视，任何的变化都能监听-02.1
        deep: true,
        handler: function (newTaskMsgs) {
          //将taskMsgs最新的值保存在localStoage中-02.2
          localStorageUril.setData(newTaskMsgs)
        }
      }
    },
    methods: {
      deleteTask(index) {
        this.taskMsgs.splice(index, 1);
      },
      deleteAllTrueTask() {
        //过滤所有已完成的任务
        this.taskMsgs = this.taskMsgs.filter(taskMsg => !taskMsg.taskState)
      },
      checkAllTask(check) {
        //全选或全不选
        this.taskMsgs.forEach(taskMsg => taskMsg.taskState = check)
      }
    }
  }
</script>

<style scoped>
  .solidClass {
    border: 1px solid silver
  }

  #innerDiv {
    padding-top: 10px;
    width: 60%;
    padding-left: 10px
  }
</style>
